<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  <title>众茶国际</title>

  <script src="../vueJS/vue.js"></script>  
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../ElementUI/index.css">
  <!-- 引入组件库 -->
  <script src="../ElementUI/index.js"></script>
  <script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- <div>{{ response }}</div> -->
    <div class="wrapper">
      <!-- <div style="width: 100%">{{ openId }}</div> -->
      <div class="title_bg">
        <div class="title">{{ name }}</div>
        <div class="title_tip">付款给商户</div>
      </div>
      <div class="section">
        <div class="type_section">
          <div @click="isShowType = true" class="type_bg">
            <div class="type_title">{{ selectTypeTitle }}</div>
            <div class="arrow">></div>
          </div>
        </div>
        <div class="info_bg">
          <img class="icon" src="wxpay_fz.png" alt="">
          <div class="info_amount">付款金额</div>
        </div>
        <div class="input_bg">
          <div class="money_icon">￥</div>
          <el-input type="digit" v-model="appIntegral" @input="handleInput" maxlength="9" class="input_content"></el-input>
        </div>
        <div class="line"></div>
        <div class="bottom_bg">
          <div class="pay_title" @click="pay">付款</div>
        </div>
      </div>
      <div v-if="isShowInfo" class="pay_info_bg">
        <div class="pay_info_content">
          <div style="display: flex; justify-content: center; margin-top: 35px;">
            <img class="pay_info_icon" src="pay_info_icon.png" alt="">
          </div>
          <div class="tips">确认支付{{ appIntegral }}元?</div>
          <div class="btn_bg">
            <div @click="isShowInfo = false" class="cancel_pay_btn">取消</div>
            <div @click="confirmPay" class="confirm_pay_btn">确认支付</div>
          </div>
        </div>
      </div>
      <div v-if="isShowType" class="select_type_black_bg">
        <div class="select_type_bg">
          <div class="cancel_btn_bg">
            <div @click="isShowType = false" class="cancel_btn">取消</div>
          </div>
          <div class="type_detail_bg">
            <div @click="handleSelectType(index)" v-for="(item, index) in typeList" :key="index" :class="['detail_normal_type', selectIndex == index ? 'detail_select_type':'']">
              {{ item }}
            </div>
          </div>
          <div class="confirm_bg">
            <div @click="handleConfirm" class="confirm_btn">确定</div>
          </div>
        </div>
      </div>
  
      <!-- 登陆参数：{{ code }}
      结果参数：{{ response }} -->
      <!-- <div style="height: 500px" v-html="htmlStr"></div> -->
      <!-- <iframe style="height:500px" :srcdoc="htmlStr"></iframe> -->
    </div>
  </div>
</body>

<script type="text/javascript">
  new Vue({
    el:'#app',
    data:{
      code: '',
      openId: '',
      response: {},
      htmlStr: '',
      appIntegral: '',
      name: "",
      memberId: '',
      isShowInfo: false,
      trxChannel: '',
      linkText: "",
      typeList: ['黑茶-普洱茶紧压型-晒青大叶种茶', '白茶-白牡丹紧压型-福鼎大白茶', '黄茶-蒙顶黄芽紧压型-蒙顶山茶', '绿茶-特级明前茶兰花香-高山云雾茶', '红茶-英红九号散茶-英德大叶种茶', '乌龙茶-鸭屎香蜜兰香散茶-凤凰单丛茶', '茶叶器具-茶桌茶盘紫砂壶品茗杯冲泡组合'],
      selectIndex: 0,
      isShowType: false,
      selectTypeTitle: '',
      tempTitle:'',
    },
    computed: {},
    watch: {},
    methods: {
      handleInput(e) {
        let value = e;
        let valueleng = value.toString() 
        value = value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')
        
        if(value > 100000){
          console.log('超过了')
          value = valueleng.slice(0, valueleng.length - 1);
        }
        if (value.indexOf(".") < 0 && value != "") { 
          value = parseFloat(value);
        }
        
        this.$nextTick(function() {
          this.appIntegral = value
        })
      },
      pay() {
        if (!this.memberId || this.memberId.length == 0) {
          this.$message.error("参数code不能为空");
          return
        }
        if (!this.openId || this.openId.length == 0) {
          this.$message.error("参数openId不能为空");
          return
        }

        if(this.appIntegral == ''){
          this.$message.error("金额不能为空或者小于0.01元");
        }else{
          if(this.appIntegral[this.appIntegral.length - 1] == '.'){
            this.appIntegral = this.appIntegral + '00'
          }else{
            if(this.appIntegral[this.appIntegral.length - 3] != '.' && this.appIntegral[this.appIntegral.length - 2] != '.'){
              this.appIntegral = this.appIntegral + '.00'
            }else if(this.appIntegral[this.appIntegral.length - 2] == '.'){
              this.appIntegral = this.appIntegral + '0'
            }
          }

          this.isShowInfo = true
        }
      },
      confirmPay() {
        this.isShowInfo = false

        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          this.trxChannel = '99'
        } else if (ua.match(/Alipay/i)=="alipay") {
          this.trxChannel = '98'
        } else {
          this.$message.error("请在微信客户端扫码打开链接");
          return
        }

        let randomNum = Math.round(Math.random()*1000000);
        let productName = this.selectTypeTitle + '-' + randomNum

        let link = `http://zcgj-api.utea88.com/front/xcxPay/offlineH5ScanPay?money=${this.appIntegral}&code=${this.memberId}&openId=${this.openId}&trxChannel=${this.trxChannel}&productName=${productName}&type=0`
        console.log("跳转链接：", link);
        window.location.href = link
      },
      GetUrlParam(name) {
        // 用该属性获取页面 URL 地址从问号 (?) 开始的 URL（查询部分）
        var url = window.location.search;
        // 正则筛选地址栏
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        // 匹配目标参数
        var result = url.substr(1).match(reg);
        //返回参数值
        return result ? decodeURIComponent(result[2]) : null;
      },
      handleSelectType(index) {
        this.selectIndex = index
        this.tempTitle = this.typeList[this.selectIndex]
      },
      handleConfirm() {
        this.selectTypeTitle = this.tempTitle
        this.isShowType = false
      }
    },
    created() {
      this.selectTypeTitle = this.typeList[this.selectIndex]
      this.tempTitle = this.typeList[this.selectIndex]
      
      this.linkText = window.location.href;
      
      const loading = this.$loading({
        lock: true,
        text: '',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)'
      });

      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.memberId = this.GetUrlParam("H5PayCode");
        console.log("参数memberId：",this.memberId);

        this.code = this.GetUrlParam("code");
        console.log("参数code：",this.code);

        var xmlhttp = new XMLHttpRequest();

        var that = this
        xmlhttp.onreadystatechange = function () {
          loading.close();
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            let response = JSON.parse(xmlhttp.responseText)
            that.name = response.result.name
            that.openId = response.result.openid;
            console.log("参数response：",response);
          }
        };

        let requestUrl = "http://zcgj-api.utea88.com/front/xcxPay/wxH5Login?code=" + this.code + "&memberId=" + this.memberId
        xmlhttp.open("POST", requestUrl, true);
        xmlhttp.setRequestHeader(
          "Content-type",
          "application/x-www-form-urlencoded"
        );
        xmlhttp.send(null);
      } 
      else if (ua.match(/Alipay/i)=="alipay") {
        loading.close();
        this.name = this.GetUrlParam("name");
        this.openId = this.GetUrlParam("openId");
        this.memberId = this.GetUrlParam("code");

        // let url = "http://zcgj-api.utea88.com/dinner/ICBC/b2c/h5pay1?openid=" + this.userId
        // window.location.href = url
      } else {
        loading.close();
      }
    },
    mounted() {
    },
  })
</script>

<style lang='scss' scoped>
  body {
    margin: 0;
  }

  #app {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(244, 247, 250, 1);
  }

  .title_bg {
    position: relative;
    width: 100%;
    height: 81px;
    padding-bottom: 10px;
    background: rgba(244, 247, 250, 1);
  }

  .title {
    position: relative;
    padding-top: 10px;
    width: 100%;
    /* height: 28px; */
    color: rgba(0, 0, 0, 1);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
  }

  .title_tip {
    margin-top: 4px;
    width: 100%;
    height: 17px;
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    text-align: center;
  }

  .section {
    position: relative;
    width: 100%;
    padding-bottom: 10px;
    background-color: #fff;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
  }

  .type_section {
    width: 100%;
    height: 84px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);;
  }

  .type_bg {
    position: relative;
    padding-top: 25px;
    width: 100%;
    height: 49px;
  }

  .type_title {
    margin-left: 25px;
    width: 280px;
    height: 100%;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: 49px;

    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .arrow {
    position: absolute;
    bottom: 17px;
    right: 25px;
  }

  .info_bg {
    display: flex;
    align-items: center;
    /* padding-top: 29px; */
    margin-left: 25px;
    height: 51px;
  }

    .icon {
      width: 16px;
      height: 16px;
    }

    .info_amount {
      margin-left: 9px;
      height: 22px;
      color: rgba(0, 0, 0, 1);
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
    }

    .input_bg {
      display: flex;
      align-items: center;
      margin-left: 20px;
      margin-top: 26px;
      height: 42px;
    }

    .money_icon {
      width: 24px;
      height: 42px;
      color: rgba(0, 0, 0, 1);
      font-size: 24px;
      font-weight: 500;
      line-height: 42px;
    }

    .input_content {
      flex: 1;
      height: 42px;
    }

    .el-input__inner {
      border: 0;
      border-radius: 0;
      margin-left: 5px;
      padding: 0;
      height: 42px;
      color: rgba(0, 0, 0, 1);
      font-size: 30px;
      font-weight: 500;
      line-height: 42px;

        /* 设置光标颜色 */
      caret-color: rgb(248, 40, 84);
    }

    .line {
      margin-top: 10px;
      margin-left: 25px;
      width: calc(100% - 50px);
      height: 1px;
      background-color: rgba(238, 238, 238, 1);;
    }

    .bottom_bg {
      display: flex;
      justify-content: center;
      margin-top: 55px;
      width: 100%;
    }

    .pay_title {
      width: calc(100% - 50px);
      height: 45px;
      border-radius: 10px;
      background: rgb(248, 40, 84);
      color: white;
      font-size: 20px;
      font-weight: 500;
      line-height: 45px;
      text-align: center;
    }

  .pay_info_bg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.68);
  }

  .pay_info_content {
    width: 263px;
    height: 240px;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
  }

  .pay_info_icon {
    width: 60px;
    height: 60px;
  }

  .tips {
    margin-top: 30px;
    margin-left: 10px;
    width: calc(100% - 20px);
    height: 21px;
    font-size: 15px;
    font-weight: 400;
    color: rgba(170, 170, 170, 1);
    line-height: 21px;
    text-align: center;
  }

  .btn_bg {
    margin-top: 24px;
    display: flex;
    width: 100%;
    justify-content: space-around;
  }

  .cancel_pay_btn {
    width: 90px;
    height: 40px;
    color: rgba(83, 96, 105, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    background: rgba(242, 245, 247, 1);
    border-radius: 50px;
  }

  .confirm_pay_btn {
    width: 90px;
    height: 40px;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    background: linear-gradient(90deg, rgba(255, 64, 108, 1) 0%, rgba(240, 19, 67, 1) 100%);
    box-shadow: 0px 2px 4px rgba(250, 44, 90, 0.3);
    border-radius: 30px;
    mix-blend-mode: normal;
  }

  .select_type_black_bg {
    position: relative;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.68);
  }

  .select_type_bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 10px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background: white;
  }

  .cancel_btn_bg {
    width: 100%;
    height: 48px;
  }

  .cancel_btn {
    position: absolute;
    right: 0;
    width: 64px;
    height: 48px;
    color: rgba(128, 128, 128, 1);
    font-size: 15px;
    font-weight: 400;
    line-height: 48px;
    text-align: center;
  }

  .type_detail_bg {
    width: 100%;
  }

  .detail_normal_type {
    width: 100%;
    height: 48px;
    color: rgba(128, 128, 128, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: 48px;
    text-align: center;
    background-color: white;
  }

  .detail_select_type {
    width: 100%;
    height: 48px;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: 500;
    line-height: 48px;
    text-align: center;
    background-color: rgb(243, 246, 249);
  }

  .confirm_bg {
    margin-top: 10px;
    width: 100%;
    height: 49px;
    display: flex;
    justify-content: center;
  }

  .confirm_btn {
    width: calc(100% - 32px);
    height: 100%;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: 400;
    line-height: 49px;
    text-align: center;
    background: linear-gradient(90deg, rgba(255, 64, 108, 1) 0%, rgba(240, 19, 67, 1) 100%);
    box-shadow: 0px 2px 4px rgba(250, 44, 90, 0.3);
    border-radius: 30px;
  }

  /* 设置图标颜色 */
  .el-icon-loading {
    font-size: 40px;
  }

  /* 设置文字颜色 */
  .el-loading-spinner .el-loading-text{
    font-size: 15px;
  }
</style>
</html>